<template>
  <div>
    <div class="user-header">
      <div class="container user-header__flex" v-if="!loading">
        <div class="user-header__avatar">
          <edu-avatar :src="userBasicData.avatar_url" :size="140"></edu-avatar>
        </div>

        <div class="user-header_info">
          <div v-if="is_teacher" class="user-header__name">{{ userBasicData.title }}</div>
          <div v-else class="user-header__name">{{ userBasicData.nick_name }}</div>

          <div
            v-if="is_teacher && $util.isDef(userBasicData.level_text)"
            class="user-header__level"
          >
            {{ userBasicData.level_text }}
          </div>

          <div
            v-if="is_teacher && userBasicData.mhm_id != 1"
            class="user-header__school"
            @click="toScholl"
          >
            所属机构：{{ userBasicData.school_name
            }}<i class="el-icon-view el-icon-arrow-right"></i>
          </div>
        </div>

        <div class="user-header__tool">
          <el-button
            v-if="!is_teacher && is_user"
            type="primary"
            icon="edu-icon--left edu-icon-tiwen"
            size="mini"
            @click="goUserInfo"
            >编辑资料</el-button
          >
          <template v-if="is_teacher || !is_user">
            <el-button
              v-if="userBasicData.is_follow == 1 || userBasicData.followed == 1"
              type="primary"
              size="mini"
              @click="handleFollowChange"
              >已关注</el-button
            >
            <el-button
              v-else
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleFollowChange"
              >关注</el-button
            >
            <el-button
              type="primary"
              icon="edu-icon--left edu-icon-tiwen"
              size="mini"
              @click="openQuestionPrompt"
              >提问</el-button
            >
          </template>
        </div>
      </div>
    </div>
    <div class="user-body container">
      <div class="user-body__main">
        <el-tabs v-model="activeName" @tab-click="handleTabChange">
          <el-tab-pane v-if="is_teacher" label="介绍" name="info">
            <div class="user-body__wrap">
              <div v-if="userBasicData.info" v-html="userBasicData.info" class="teacher-info"></div>
              <edu-no-data v-if="$util.isEmpty(userBasicData.info)"></edu-no-data>
            </div>
          </el-tab-pane>
          <el-tab-pane
            v-for="page in mainList"
            :key="page.type"
            :label="page.name"
            :name="page.type"
          >
            <div class="user-body__wrap" v-loading="page.loading" element-loading-text="加载中...">
              <!-- 动态 -->
              <template v-if="page.type == 0">
                <circle-list
                  v-if="!page.loading && page.list.length > 0"
                  :list="page.list"
                  class="circle-list"
                >
                  <template slot-scope="scope">
                    <circle-item
                      v-for="item in scope.list"
                      :key="item.id"
                      :datas="item"
                      showDelete
                      showFollow
                      showShare
                      :contentLength="162"
                      @onForward="openCircleForward"
                      @onDelete="handleDeleteCircle"
                      @onLike="handleLikeCircle($event, 1)"
                    >
                      <div class="reply-main">
                        <circle-textarea
                          showUpload
                          type="textarea"
                          placeholder="发表你的评论吧～"
                          btn-text="发表"
                          :max-length="200"
                          @click="handleCircleCommentSubmit($event, item.id)"
                        ></circle-textarea>
                        <circle-list
                          v-if="item.list.length > 0"
                          :list="item.list"
                          :max-length="3"
                          :total-length="item.list.length"
                          show-more
                          class="reply-main__list"
                        >
                          <template slot-scope="scope">
                            <circle-item
                              v-for="data in scope.list"
                              :key="data.id"
                              :datas="data"
                              @onLike="handleLikeCircle($event, 2)"
                            >
                            </circle-item>
                          </template>
                        </circle-list>
                      </div>
                    </circle-item>
                  </template>
                </circle-list>
              </template>
              <!-- 课程 -->
              <template v-else-if="$util.inArray(page.type, [1, 2, 3, 4])">
                <div v-if="page.list.length > 0" class="course-list">
                  <div v-for="item in page.list" :key="item.id" class="item">
                    <EduCourseImage
                      :image="item.cover_url"
                      :course-type="page.type"
                      :border-radius="6"
                      :height="100"
                      @click="goCourse(item.id)"
                    >
                    </EduCourseImage>
                    <div class="content">
                      <div class="title" @click="goCourse(item.id)">{{ item.title }}</div>
                      <div class="parallel">
                        <div class="num">{{ item.student_count || item.sale_count }}人在学</div>
                        <div class="price" v-if="item.price > 0">
                          {{ item.price | formatMoney }}
                        </div>
                        <div v-else class="free">免费</div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 关注/粉丝 -->
              <template v-else-if="$util.inArray(page.type, [5, 6])">
                <div v-if="page.list.length > 0" class="follow-list">
                  <div v-for="(item, index) in page.list" :key="index" class="item">
                    <edu-avatar
                      :size="56"
                      :src="item.avatar_url"
                      @click="goUser(item.user_id)"
                    ></edu-avatar>
                    <div class="content">
                      <div class="name" @click="goUser(item.user_id)">{{ item.nick_name }}</div>
                      <div class="signature">{{ item.signature }}</div>
                    </div>

                    <template v-if="is_user">
                      <!-- 关注 -->
                      <template v-if="page.type == 5">
                        <div
                          v-if="item.has_follow_me == 0"
                          class="del-btn"
                          @click="handleFollowedList(item.user_id, 0)"
                        >
                          已关注
                        </div>
                        <div v-else class="del-btn" @click="handleFollowedList(item.user_id, 0)">
                          互相关注
                        </div>
                      </template>
                      <!-- 粉丝 -->
                      <template v-else>
                        <div
                          v-if="item.is_follow == 0"
                          class="follow-btn"
                          @click="handleFollowedList(item.user_id, 1)"
                        >
                          关注
                        </div>
                        <div v-else class="del-btn" @click="handleFollowedList(item.user_id, 0)">
                          互相关注
                        </div>
                      </template>
                    </template>
                  </div>
                </div>
              </template>
              <edu-no-data v-if="!page.loading && page.list.length == 0"></edu-no-data>

              <el-pagination
                v-if="!page.loading"
                :current-page.sync="page.num"
                :page-size="page.size"
                :hide-on-single-page="true"
                layout="prev, pager, next, jumper"
                :total="page.total"
                class="pagination-list"
                @current-change="handleCurrentChange"
              ></el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="user-body__slider">
        <div class="course-wrap" v-if="is_teacher && $util.isDef(userBasicData.hot_course)">
          <div class="slider-title">讲师热门课程</div>
          <div class="course-scrollbar">
            <el-scrollbar>
              <div class="course-list">
                <div v-for="(item, index) in userBasicData.hot_course" :key="index" class="item">
                  <edu-image
                    :src="item.cover_url"
                    fit="cover"
                    @click="goCourse(item.id)"
                  ></edu-image>
                  <div class="content">
                    <div class="title" @click="goCourse(item.id)">{{ item.title }}</div>
                    <div class="parallel">
                      <div class="num">{{ item.sale_count }}人在学</div>
                      <div class="price" v-if="item.price > 0">
                        {{ item.price | formatMoney }}
                      </div>
                      <div v-else class="free">免费</div>
                    </div>
                  </div>
                </div>
              </div>
              <edu-no-data
                v-if="userBasicData.hot_course.length == 0"
                :image="false"
                text="没有热门课程~"
              ></edu-no-data>
            </el-scrollbar>
          </div>
        </div>
        <div class="visitor-wrap">
          <div class="slider-title">最近访客</div>
          <div v-if="visitor.list.length > 0" class="visitor-list">
            <div
              v-for="item in visitor.list"
              :key="item.user_id"
              class="item"
              @click="goUser(item.user_id)"
            >
              <edu-avatar :size="60" :src="item.visitor_info.avatar_url"></edu-avatar>
              <div class="title">{{ item.visitor_info.nick_name }}</div>
            </div>
          </div>
          <div class="visitor-pagination" v-if="visitor.page > 1">
            <span class="number">{{ visitor.num }}/{{ visitor.page }}</span>
            <el-button-group>
              <el-button
                :disabled="visitor.num == 1"
                size="mini"
                icon="el-icon-arrow-left"
                @click="handleVisitorPaginationChange('prev')"
              ></el-button>
              <el-button
                :disabled="visitor.num == visitor.page"
                size="mini"
                icon="el-icon-arrow-right"
                @click="handleVisitorPaginationChange('next')"
              ></el-button>
            </el-button-group>
          </div>
          <edu-no-data
            v-if="visitor.list.length == 0"
            :image="false"
            text="Ta还没有访客哦~"
          ></edu-no-data>
        </div>
      </div>
    </div>

    <!-- 转发圈子 -->
    <circle-forward
      ref="refCircleForward"
      :visible.sync="forwardVisible"
      @update="updateTabList"
    ></circle-forward>

    <!-- 提问 -->
    <question :visible.sync="questionVisible" @click="handleQuestionSubmit"></question>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import EduCourseImage from '@/components/EduCourseImage'
import EduNoData from '@/components/EduNoData'
import circleList from '@/views/circle/components/circle-list'
import circleItem from '@/views/circle/components/circle-item'
import circleTextarea from '@/views/circle/components/circle-textarea'
import circleForward from '@/views/circle/components/circle-forward'
import question from './components/question'
export default {
  components: {
    EduCourseImage,
    EduNoData,
    circleList,
    circleItem,
    circleTextarea,
    circleForward,
    question
  },
  inject: ['reload'],
  data() {
    return {
      loading: true,
      activeName: '0',
      userBasicData: {},
      mainList: [
        { name: '动态', type: '0', num: 1, size: 12, total: 0, loading: true, list: [] },
        { name: '点播', type: '1', num: 1, size: 12, total: 0, loading: true, list: [] },
        { name: '直播', type: '2', num: 1, size: 12, total: 0, loading: true, list: [] },
        { name: '班级', type: '4', num: 1, size: 12, total: 0, loading: true, list: [] },
        { name: '关注', type: '5', num: 1, size: 32, total: 0, loading: true, list: [] },
        { name: '粉丝', type: '6', num: 1, size: 32, total: 0, loading: true, list: [] }
      ],
      visitor: {
        num: 1, // 当前
        page: 1, // 总页数
        size: 16, // 每页数
        total: 0, // 总数
        list: []
      },
      forwardVisible: false,
      questionVisible: false
    }
  },
  computed: {
    ...mapGetters({
      getUserInfo: 'user/accountInfo'
    }),
    // 当前用户是自己
    is_user() {
      return this.getUserInfo.id === this.userBasicData.id
    },
    // 当前用户是否是讲师
    is_teacher() {
      if (this.$util.isEmpty(this.userBasicData)) return false
      return this.userBasicData.identity == 2
    }
  },
  watch: {
    // 监听路由是否变化
    $route(to, from) {
      if (to.query.id != from.query.id) {
        this.reload()
      }
    }
  },
  methods: {
    // 用户基础信息
    getUserDataInit() {
      this.loading = true
      this.handleTabChange()
      this.getUserVisitorList()

      this.$api.getUserHomeInfo(
        {
          user_id: this.$route.query.id
        },
        res => {
          this.userBasicData = res.data
          if (this.is_teacher) this.activeName = 'info'
          else this.activeName = '0'
          setTimeout(() => {
            this.loading = false
          }, 200)
        }
      )
    },
    async getTabList(page) {
      let data = null
      let total = 0
      let query = {
        user_id: this.$route.query.id,
        page: page.num,
        count: page.size
      }
      if (page.type == 0) {
        // 动态
        await this.$api.getUserHomeCircle(query, res => {
          data = res.data.data.map(item => {
            item.list = []
            return item
          })
          total = res.data.total
        })
      } else if (this.$util.inArray(page.type, [1, 2, 3, 4])) {
        // 课程
        if (this.is_teacher) {
          await this.$api.getTeacherCourse(
            this.userBasicData.id,
            {
              course_type: page.type,
              page: page.num,
              count: page.size
            },
            res => {
              data = res.data.data
              total = res.data.total
            }
          )
        } else {
          query = {
            ...query,
            type: page.type
          }
          await this.$api.getUserHomeCourse(query, res => {
            data = res.data.data
            total = res.data.total
          })
        }
      } else if (page.type == 5) {
        await this.$api.getFollow(query, res => {
          data = res.data.data
          total = res.data.total
        })
      } else if (page.type == 6) {
        await this.$api.getFollowFollower(query, res => {
          data = res.data.data
          total = res.data.total
        })
      }

      this.mainList.forEach(item => {
        if (item.type == page.type) {
          if (page.num == 1) item.list = []
          item.list = data
          item.num = page.num
          item.total = total
          setTimeout(() => {
            item.loading = false
          }, 200)
        }
      })
    },
    // 更新列表
    updateTabList() {
      this.mainList.forEach(item => {
        if (item.type == this.activeName) {
          item.loading = true
          this.getTabList({
            type: Number(item.type),
            num: 1,
            size: item.size
          })
        }
      })
    },
    // 访客
    getUserVisitorList() {
      this.$api.getUserVisitorRecent(
        {
          user_id: this.$route.query.id,
          page: this.visitor.num,
          count: this.visitor.size
        },
        res => {
          const { data } = res
          if (this.visitor.num == 1) this.visitor.list = []
          this.visitor.list = data.data
          this.visitor.page = data.last_page
          this.visitor.total = data.total
        }
      )
    },
    // 访客分页
    handleVisitorPaginationChange(layout) {
      if (layout == 'prev') {
        this.visitor.num -= 1
      } else {
        this.visitor.num += 1
      }
      this.getUserVisitorList()
    },
    // 分页
    handleCurrentChange(val) {
      window.scrollTo(0, 0)
      let page = this.mainList.find(item => item.type == this.activeName)
      if (page) {
        this.getTabList({
          type: Number(page.type),
          num: val,
          size: page.size
        })
      }
    },
    // tab
    handleTabChange() {
      let page = this.mainList.find(item => item.type == this.activeName)
      if (page && page.loading) {
        this.getTabList({
          type: Number(page.type),
          num: page.num,
          size: page.size
        })
      }
    },
    // 处理主页关注
    handleFollowChange() {
      this.$globalToLogin(() => {
        const follow = this.is_teacher ? this.userBasicData.is_follow : this.userBasicData.followed
        const user_id = this.is_teacher ? this.userBasicData.user_id : this.userBasicData.id
        if (follow == 1) {
          this.$api.deleteFollow(
            {
              user_id: user_id
            },
            res => {
              this.$message.success(res.msg)
              if (this.is_teacher) {
                this.userBasicData.is_follow = 0
              } else {
                this.userBasicData.followed = 0
              }
            },
            err => {
              this.$message.error(err.msg)
            }
          )
        } else {
          this.$api.createFollow(
            {
              user_id: user_id
            },
            res => {
              this.$message.success(res.msg)
              if (this.is_teacher) {
                this.userBasicData.is_follow = 1
              } else {
                this.userBasicData.followed = 1
              }
            },
            err => {
              this.$message.error(err.msg)
            }
          )
        }
      })
    },
    // 提问
    openQuestionPrompt() {
      this.$globalToLogin(() => {
        this.questionVisible = true
      })
    },
    // 提问
    handleQuestionSubmit(val) {
      this.questionVisible = false
      const user_id = this.is_teacher ? this.userBasicData.user_id : this.userBasicData.id
      let query = {
        recive_user_id: user_id,
        content: val.content
      }
      if (!this.$util.isEmpty(val.attach)) {
        query = {
          ...query,
          attach: String(val.attach)
        }
      }
      this.$api.createQuestion(
        query,
        res => {
          this.$message.success(res.msg)
        },
        error => {
          this.$message.error(error.msg)
        }
      )
    },
    // 删除圈子
    handleDeleteCircle(id) {
      this.$messageBox
        .confirm('确定删除该动态吗？', {
          center: true,
          type: '',
          showClose: true
        })
        .then(() => {
          this.$api.deleteCircle(
            {
              id
            },
            res => {
              this.$message.success(res.msg)
              this.updateTabList()
            },
            err => {
              this.$message.error(err.msg)
            }
          )
        })
        .catch(() => {})
    },
    // 评论圈子
    handleCircleCommentSubmit(val, id) {
      let query = {
        circle_id: id,
        content: val.content
      }
      if (!this.$util.isEmpty(val.attach)) {
        query = {
          ...query,
          attach: String(val.attach)
        }
      }
      this.$api.createCircleComment(
        query,
        res => {
          this.$message.success(res.msg)
          this.updateTabList()
        },
        err => {
          this.$message.error(err.msg)
        }
      )
    },
    // 打开圈子转发弹窗
    openCircleForward(id) {
      this.forwardVisible = true
      this.$refs.refCircleForward.getForwardData(id)
    },
    // 处理圈子/评论点赞
    handleLikeCircle(value, type) {
      this.$api.createCircleLike(
        {
          ...value,
          type
        },
        res => {
          this.$message.success(res.msg)
        }
      )
    },
    // 关注列表/粉丝列表
    handleFollowedList(id, type) {
      if (type == 1) {
        this.$api.createFollow(
          {
            user_id: id
          },
          res => {
            this.$message.success(res.msg)
            this.updateTabList()
          }
        )
      } else {
        this.$api.deleteFollow(
          {
            user_id: id
          },
          res => {
            this.$message.success(res.msg)
            this.updateTabList()
          }
        )
      }
    },
    // 跳转课程
    goCourse(id) {
      this.$router.push({
        path: '/course/' + id
      })
    },
    // 用户中心
    goUser(id) {
      this.$router.push({
        path: '/user',
        query: {
          id: id
        }
      })
    },
    // 编辑资料
    goUserInfo() {
      this.$router.push({
        path: '/my/profile/my_profile'
      })
    },
    // 跳转机构
    toScholl() {
      window.open(`${this.userBasicData.mhm_sdn}?id=${this.userBasicData.mhm_id}`, '_blank')
    }
  },
  mounted() {
    if (this.$util.isDef(this.$route.query.type)) {
      this.activeName = this.$route.query.type
    }
    this.getUserDataInit()
  }
}
</script>

<style lang="scss" scoped>
.user-header {
  height: 220px;
  background: rgba(255, 255, 255, 0.2);
  background-image: url('~@assets/images/teacher/teacher_bg.png');
  background-repeat: no-repeat;
  background-position: center;
  &__flex {
    display: flex;
    align-items: center;
    height: 220px;
  }
  &__avatar {
    display: flex;
    border: 4px solid #ffffff;
    border-radius: 100%;
  }
  &_info {
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
  }
  &__name {
    max-width: 800px;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    line-height: 33px;
    @include ellipsis;
  }
  &__level {
    font-size: 12px;
    border: 1px solid #fff;
    padding: 2.5px 5px;
    color: #fff;
    margin-left: 10px;
  }
  &__school {
    margin-top: 20px;
    width: 100%;
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
  }
}
.user-body {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  ::v-deep .el-tabs__nav-wrap {
    padding-left: 30px;
    .el-tabs__item {
      height: 44px;
      line-height: 44px;
    }
    &::after {
      height: 1px;
      background-color: #f7f7f7;
    }
  }

  &__main {
    flex: 1;
    min-width: 0;
    padding-bottom: 50px;
    background: #ffffff;
    .user-body__wrap {
      min-height: 500px;
    }
    .teacher-info {
      padding: 20px 15px;
      font-size: 14px;
      font-weight: 400;
      color: #303133;
      line-height: 24px;
      letter-spacing: 1px;
      word-wrap: break-word;
      ::v-deep .image img {
        max-width: 100%;
      }
    }
    .circle-list {
      padding: 0 20px;
      margin-top: 15px;
      .reply-main {
        margin-top: 20px;
        &__list {
          padding: 15px 20px;
          margin-top: 20px;
          background: #f7f7f7;
        }
      }
    }
    .course-list {
      margin-top: 13px;
      padding: 0 20px;
      display: grid;
      grid-gap: 32px 16px;
      grid-template-columns: repeat(4, minmax(0px, 1fr));
      .item {
        grid-column: span 1 / span 1;
        .content {
          margin-top: 12px;
          .title {
            font-size: 14px;
            font-weight: 500;
            color: $text-color-import;
            line-height: 21px;
            cursor: pointer;
            @include ellipsis;
          }
          .parallel {
            margin-top: 12px;
            display: flex;
            align-items: center;
            .num {
              flex: 1;
              min-width: 0;
              font-size: 12px;
              font-weight: 400;
              color: $text-color-auxiliary;
            }
            .price,
            .free {
              font-size: 14px;
              font-weight: 500;
              margin-left: 5px;
            }
            .price {
              color: $text-color-price;
            }
            .free {
              color: $text-color-free;
            }
          }
        }
      }
    }
    .follow-list {
      margin-top: 13px;
      padding-left: 25px;
      padding-right: 44px;
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .content {
          flex: 1;
          min-width: 0;
          margin-left: 20px;
          .name {
            font-size: 15px;
            color: $text-color-import;
            font-weight: 500;
            cursor: pointer;
          }
          .signature {
            margin-top: 10px;
            font-size: 13px;
            color: $text-color-auxiliary;
            font-weight: 400;
            @include ellipsis();
          }
        }
        .del-btn,
        .follow-btn {
          width: 70px;
          height: 26px;
          font-size: 14px;
          font-weight: 400;
          line-height: 26px;
          text-align: center;
          border-radius: 2px;
          cursor: pointer;
          box-sizing: border-box;
          margin-left: 20px;
        }
        .del-btn {
          color: #909399;
          border: 1px solid #909399;
        }
        .follow-btn {
          color: #ffffff;
          @include edu-color-primary(background);
        }
      }
    }
    .pagination-list {
      margin-top: 50px;
      display: flex;
      justify-content: center;
    }
  }
  &__slider {
    flex: 0 0 366px;
    min-width: 0;
    margin-left: 14px;
    .slider-title {
      padding: 0 20px;
      height: 44px;
      font-size: 14px;
      font-weight: 400;
      color: $text-color-secondary;
      line-height: 44px;
      border-bottom: 1px solid #f7f7f7;
    }
    .course-wrap {
      background: #ffffff;
      margin-bottom: 14px;
      .course-scrollbar {
        padding: 20px 0 25px;
      }
      .course-list {
        padding: 0 20px;
        max-height: 364px;
        .item + .item {
          margin-top: 20px;
        }
        .item {
          display: flex;
          align-items: center;
          .el-image {
            height: 76px;
            width: 138px;
            cursor: pointer;
          }
          .content {
            flex: 1;
            min-width: 0;
            margin-left: 14px;
            .title {
              height: 36px;
              font-size: 14px;
              font-weight: 500;
              line-height: 18px;
              color: $text-color-import;
              cursor: pointer;
              @include ellipsisLine(2);
              &:hover {
                @include edu-color-auxiliary;
              }
            }
            .parallel {
              margin-top: 12px;
              display: flex;
              align-items: center;
              .num {
                flex: 1;
                min-width: 0;
                font-size: 12px;
                font-weight: 400;
                color: $text-color-auxiliary;
              }
              .price,
              .free {
                font-size: 16px;
                font-weight: 500;
                margin-left: 5px;
              }
              .price {
                color: $text-color-price;
              }
              .free {
                color: $text-color-free;
              }
            }
          }
        }
      }
    }
    .visitor-wrap {
      padding-bottom: 30px;
      background: #ffffff;
      .visitor-list {
        margin-top: 20px;
        padding: 0 20px;
        display: grid;
        grid-gap: 20px 8px;
        grid-template-columns: repeat(4, minmax(0px, 1fr));
        .item {
          grid-column: span 1 / span 1;
          text-align: center;
          cursor: pointer;
          .title {
            margin-top: 12px;
            font-size: 12px;
            font-weight: 400;
            color: $text-color-secondary;
            line-height: 18px;
            @include ellipsis();
          }
          &:hover {
            .title {
              @include edu-color-primary;
            }
          }
        }
      }
      .visitor-pagination {
        margin-top: 20px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .number {
          margin-right: 6px;
          font-size: 13px;
          color: $text-color-auxiliary;
          line-height: 16px;
        }
        .el-button {
          padding: 4px 4px;
          color: $text-color-auxiliary;
          background: #f7f7f7;
          border-color: #dcdfe6;
          &.is-disabled,
          &.is-disabled:hover {
            color: #dcdfe6;
            background: #ffffff;
          }
          &:hover,
          &:focus {
            color: $text-color-auxiliary;
            background-color: #f7f7f7;
            border-color: #dcdfe6;
          }
        }
      }
    }
  }
}
</style>
